<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家添加民宿</title>
</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/Axios/axios-0.18.0.js"></script>

<div id="app">



    <el-form ref="form" :model="Employee" label-width="150px">
        <el-form-item label="员工的姓名：">
            <el-input v-model="Employee.name"></el-input>
        </el-form-item>
        <el-form-item label="员工密码：">
            <el-input v-model="Employee.password"></el-input>
        </el-form-item>
        <el-form-item label="员工手机号码：">
            <el-input v-model="Employee.phone"></el-input>
        </el-form-item>
            <el-form-item label="身份证号码：">
                <el-input v-model="Employee.idNumber"></el-input>
            </el-form-item>

        <el-form-item label="性别：">
            <el-select v-model="Employee.sex" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
            </el-select>





        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="cancel()">取消</el-button>
        </el-form-item>
    </el-form>






</div>




<script>




    new Vue({

        el: "#app",

        data() {
            return {




                // 这是商品的数据
                Employee: {

                    id: '',                    /* 员工的 id */
                    name: '姓名',             /* 员工姓名 */
                    username: '-1',                 /* 账号名称 */
                    password: '123456',                /* 密码 */
                    phone: '',                 /* 电话号码 */
                    sex: '1',                 /* 性别 */
                    idNumber: '',               /* 身份证号码 */
                    status: '0',               /* 状态 0禁用 1启用 */
                    createTime: '',               /* 创建时间 */
                    updateTime: '',                /* 更新时间 */

                },


            }
        },

        methods: {


            /* 提交按钮的事件 */
            async onSubmit() {

                // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                let   rule1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

                // 手机号的规则
                let  rule2 = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;

                // 密码的规则
                let rule3 = /^\w{6,12}$/;

                if (this.Employee.name == ''){
                    alert("员工姓名不能为空")
                    return
                }

                if (this.Employee.password == '' || ! rule3.test(this.Employee.password)){
                    alert("密码为 6~12 位的数字或字母")

                    return
                }

                if (this.Employee.phone == '' || ! rule2.test(this.Employee.phone)){
                    alert("请输入正确的手机号码")
                    return
                }
                if (this.Employee.idNumber == '' || ! rule1.test(this.Employee.idNumber)){
                    alert("请输入正确的身份证号码")
                    return
                }



                let _this = this;
                axios({
                    method:"post",
                    url:"/employee/saveEmployee",
                    data: _this.Employee
                }).then(function (resp) {
                    if(resp.data.code == 1){

                        window.location.href = "../Employee/employee.html";
                        alert("添加成功")
                    } else {
                        alert(resp.data.msg)
                    }



                });

            },

            // 取消
            cancel(){

                window.location.href = "../Employee/employee.html";

            }


        }




    })


</script>



</body>
</html>